<template>
  <div class="message-box">
    <el-aside width="270px">
      <div class="message-header">
        <div class="whole-box">
          <el-button
            type="info"
            icon="el-icon-arrow-left"
            size="small"
            plain
            circle
            @click="backMessage()"
          ></el-button
          ><span style="margin-left: 15px">全部私信</span>
        </div>
        <div class="whole-message">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="first">
              <MoreMessage
                :dataList="chatList"
                @transPage="changePage"
                @transChat="changeChat"
              ></MoreMessage>
            </el-tab-pane>
            <el-tab-pane label="朋友私信" name="second">
              <MoreMessage
                :dataList="chatList"
                @transPage="changePage"
                @transChat="changeChat"
              ></MoreMessage>
            </el-tab-pane>
            <el-tab-pane label="群消息" name="third">
              <MoreMessage
                :dataList="chatList"
                @transPage="changePage"
                @transChat="changeChat"
              ></MoreMessage>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-aside>
    <el-main>
      <div>
        <div class="chat-header">
          <div class="chat-name">
            <h6>ai耶耶</h6>
            <p>查看Ta的主页<i class="el-icon-menu"></i></p>
          </div>
          <div class="chat-btn">
            <el-button type="text" icon="el-icon-more"></el-button>
            <div class="more-box">
              <ul>
                <li>消息免打扰</li>
                <li>置顶聊天</li>
                <li>举报</li>
                <li>拉黑</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="chat-interface">
          <div v-for="(item, index) in chatRecordList" :key="index">
            <div
              class="interface-time"
              v-if="
                formatDateBetween(
                  item.msgTime,
                  chatRecordList[index == 0 ? 1 : index - 1].msgTime
                )
              "
            >
              <p>{{ item.msgTime | formatDate }}</p>
            </div>
            <div
              class="interface-opposite-side clearfix"
              v-if="item.msgUserType == 1"
            >
              <div class="opposite-picture">
                <img :src="item.userAvatar" class="chat-firend-picture" />
              </div>
              <div class="interface-opposite-word">
                {{ item.msgContent }}
              </div>
            </div>
            <div v-else class="interface-my-side clearfix">
              <div class="interface-my-word">
                {{ item.msgContent }}
              </div>
              <div class="my-picture">
                <img :src="userInfo.avatar" class="chat-my-picture" />
              </div>
            </div>
            <div style="clear: both"></div>
          </div>
        </div>
        <div class="chat-keyboard">
          <div>
            <el-input
              v-model="text"
              type="textarea"
              placeholder="按回车即发送，shift+enter换行..."
              class="chat-context"
            ></el-input>
          </div>
          <div class="send-part">
            <div class="send-expression"></div>
            <div class="send-btn">
              <el-button type="danger" size="small">发送</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>

<script>
import MoreMessage from "@/components/MoreMessage.vue";
import { getChatTypeListApi } from "@/api/chatWindow";
import { searchChatRecordListApi } from "@/api/navHeader";
import { formatDate } from "@/utils/date";
export default {
  data() {
    return {
      text: "",
      activeName: "first",
      chatList: [],
      talkType: 0,
      currentPage: 1,
      chatRecordList: [],
      // talkId: 0,
      //  chatMessageInfo: {},
      userInfo: this.$store.state.userInfo,
    };
  },
  components: {
    MoreMessage,
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
  },
  created() {
    this.getChatTypeListFun();
  },
  methods: {
    formatDateBetween(curTime, preTime) {
      if (curTime && preTime) {
        var startDate = new Date(preTime);
        var stopDate = new Date(curTime);
        var startTime = startDate.getTime();
        var stopTime = stopDate.getTime();
        console.log(startTime, "发送时间");
        console.log(stopTime, "结束时间");
        var cTime = Number(stopTime) - Number(startTime);
        var secondTime = cTime / 1000 / 60;
        console.log(secondTime);
        return secondTime > 5;
      }
    },
    backMessage() {
      this.$router.push({ path: "/messageManagement" });
    },
    changePage(page) {
      this.currentPage = page;
      this.getChatTypeListFun();
    },
    changeChat(item) {
      searchChatRecordListApi({
        userId: this.userInfo.userId,
        talkId: item.talkId,
        talkType: item.talkType,
        page: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          this.chatRecordList = res.data.data;
          // this.talkId = this.chatRecordList[0].talkId;
          // this.chatMessageInfo=this.chatRecordList[0];
        }
      });
    },
    getChatTypeListFun() {
      getChatTypeListApi({
        userId: this.userInfo.userId,
        talkType: this.talkType,
        talkPage: this.currentPage,
      }).then((res) => {
        if (res.data.code == 200) {
          this.chatList = res.data.data;
        }
      });
    },
    handleClick(tab, event) {
      var index = tab.index;
      this.talkType = index;
      this.currentPage = 1;
      this.getChatTypeListFun();
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.message-box {
  position: fixed;
  width: 81%;
  background: #fff;
  border-radius: 8px;
  padding: 0 20px;
  box-sizing: border-box;
  /* margin: auto; */
  display: flex;
  left: 15%;
}
.el-aside {
  width: 300px;
}
.chat-header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #f6f6f6;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.chat-name {
  display: flex;
}
.chat-name h6 {
  font-size: 16px;
  font-weight: 600;
  margin-left: 15px;
}
.chat-name p {
  font-size: 12px;
  color: #8d8c8c;
  margin-left: 15px;
}
.chat-name p i {
  margin-left: 8px;
}
.whole-box {
  height: 60px;
  font-size: 20px;
  color: 20px;
  font-weight: 600;
  line-height: 60px;
  border-bottom: 1px solid #f6f6f6;
  border-right: 1px solid #f6f6f6;
}
.whole-message .el-tabs {
  border-right: 1px solid #f6f6f6;
}
.whole-message .el-tabs__content {
  overflow: hidden;
  padding: 10px 0;
  box-sizing: border-box;
  /* height: 380px; */
  /* overflow: scroll; */
  overflow-y: scroll;
}
.whole-message .el-tabs__header {
  margin: 0;
}
.whole-box .el-button--info.is-plain {
  border: none;
}

.message-box .el-card__body,
.el-main {
  padding: 0;
}
.chat-btn {
  position: relative;
}
.chat-btn .el-button:focus + .more-box {
  display: block;
}
.more-box {
  display: none;
  width: 110px;
  position: absolute;
  /* top: 60px; */
  top: 50px;
  right: 10px;
  box-shadow: 1px 2px 6px #e7e7e7;
  background: #fff;
  border-radius: 10px;
}
.more-box ul li {
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  text-align: left;
  font-size: 14px;
  padding: 0 18px;
}
.chat-interface {
  height: 385px;
  width: 100%;
  padding: 2px 8px 40px 8px;
  box-sizing: border-box;
  overflow-y: scroll;
  border-bottom: 1px solid #f6f6f6;
  /* border: 1px solid red; */
  /* overflow: hidden; */
}
.interface-opposite-side {
  max-width: 80%;
  display: flex;
  margin-top: 10px;
  /* display: none; */
}
.interface-my-side {
  max-width: 80%;
  margin-top: 10px;
  float: right;
  display: flex;
}
.interface-opposite-word,
.interface-my-word {
  max-width: 96%;
  text-align: left;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
  box-sizing: border-box;
  padding: 6px 8px;
}
.interface-opposite-word {
  margin-left: 5px;
  background: #f7f7f7;
}
.interface-my-word {
  margin-right: 5px;
  background: #fcdf67;
}
.interface-time {
  text-align: center;
}
.interface-time p {
  font-size: 12px;
  color: #847e7e;
  margin: 6px 0 2px 0;
}
.clearfix:after {
  clear: both;
}
.chat-context .el-textarea__inner {
  height: 75px;
  margin-bottom: 12px;
  display: block;
  resize: none;
  padding: 5px 15px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  color: #606266;
  background-color: #fff;
  background-image: none;
  /* border: 1px solid #DCDFE6; */
  border: none;
}
.send-part {
  display: flex;
  justify-content: space-between;
  padding-left: 15px;
  box-sizing: border-box;
}
.send-expression {
  width: 20px;
  height: 20px;
  background: #f7f7f7;
}
.send-btn .el-button--small {
  padding: 5px 15px;
}
</style>
